<!--
 * @Author: 半生瓜 1515706227@qq.com
 * @Date: 2024-05-06 19:31:40
 * @LastEditors: 半生瓜 1515706227@qq.com
 * @LastEditTime: 2024-05-27 18:44:13
 * @FilePath: \vue-element-plus-admin-mini\src\views\zy\Menu12.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="tsx">
import { ElInput, ElSelect, ElOption, ElMessageBox, ElMessage } from 'element-plus'
import { ref } from 'vue'
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { getAudit, deleteAudit } from '@/api/audit'
import { reactive, unref } from 'vue'
import { ElButton } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'
import { Search, Edit, Delete } from '@element-plus/icons-vue'

defineOptions({
  name: 'TemplateManage'
})
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getAudit({
      page: unref(currentPage),
      pageSize: unref(pageSize),
      auditor: unref(auditor),
      author: unref(author),
      authStatus: unref(authStatus)
    })
    return {
      list: res.data.content,
      total: res.data.totalElements
    }
  }
})
const { refresh, getElTableExpose } = tableMethods
const { loading, dataList, total, currentPage, pageSize } = tableState

const { t } = useI18n()

const columns = reactive<TableColumn[]>([
  {
    field: 'selection',
    type: 'selection'
  },
  {
    field: 'auditorId',
    label: '审核人账号'
  },
  {
    field: 'auditor',
    label: '审核人员名称'
  },
  {
    field: 'zoneName',
    label: '作品名称'
  },
  {
    field: 'authorId',
    label: '发布人账号'
  },
  {
    field: 'author',
    label: '发布人名称'
  },
  {
    field: 'applyTime',
    label: '发布时间'
  },
  {
    field: 'auditTime',
    label: '审核时间'
  },
  {
    field: 'authStatus',
    label: '审核状态',
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return (
        <div>
          {cellValue === 1
            ? '待审核'
            : cellValue === 2
              ? '通过'
              : cellValue === 3
                ? '拒绝'
                : cellValue === 4
                  ? '删除'
                  : '撤销'}
        </div>
      )
    }
  },
  {
    field: 'action',
    label: t('tableDemo.action'),
    slots: {
      default: (data) => {
        return (
          <>
            <ElButton type="danger" onClick={() => deletetab(data)}>
              {t('tableDemo.delete')}
            </ElButton>
          </>
        )
      }
    }
  }
])

//单条审核记录删除
const deletetab = async (data: TableSlotDefault) => {
  ElMessageBox.confirm('确定删除该数据?').then(async () => {
    let arr = {
      recordIds: data.row.recordId
    }
    const res = await deleteAudit(arr)
    refresh()
    if (res.code == 200) {
      ElMessage.success('删除成功')
    }
    refresh()
  })
}
//多选删除
const getSelections = async () => {
  const elTableRef = await getElTableExpose()
  const selections = elTableRef?.getSelectionRows()
  console.log('kkkskskskksksss', selections)
  let arr = {
    recordIds: []
  }
  if (selections) {
    arr.recordIds = selections.map((item) => {
      return item.recordId
    })
  }
  if (arr.recordIds.length !== 0) {
    ElMessageBox.confirm('确定删除所选数据?')
      .then(async () => {
        console.log('kankan', arr)
        const res = await deleteAudit(arr)
        console.log('kkkkkkss', res)
        if (res.code == 200) {
          ElMessage.success('删除成功')
        }
        refresh()
      })
      .catch(() => {
        // catch error
      })
  } else {
    ElMessage.warning('请选择数据')
  }
}

const options = [
  {
    value: '',
    label: '全部'
  },
  {
    value: '1',
    label: '待审核'
  },
  {
    value: '2',
    label: '审核通过'
  },
  {
    value: '3',
    label: '审核未通过'
  },
  {
    value: '4',
    label: '已删除'
  },
  {
    value: '5',
    label: '撤销'
  }
]
const auditor = ref('')
const author = ref('')
const authStatus = ref('')
//搜索
const handersearch = function () {
  tableState.currentPage.value = 1
  refresh()
}
</script>

<template>
  <ContentWrap>
    <div style="margin-bottom: 10px">
      <span style="color: #606266"> 审核人名称：</span>
      <el-input
        v-model="auditor"
        style="width: 200px; height: 43px; margin: 7px"
        placeholder="请输入审核人名称"
      />
      <span style="color: #606266"> 发布人名称：</span>
      <el-input
        v-model="author"
        style="width: 200px; height: 43px; margin: 7px"
        placeholder="请输入发布人名称"
      />
      <span style="color: #606266"> 审核状态：</span>
      <el-select v-model="authStatus" placeholder="全部" size="large" style="width: 240px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <ElButton
        style="margin-left: 20px"
        type="primary"
        size="large"
        @click="handersearch"
        :icon="Search"
        >搜索</ElButton
      >
      <ElButton type="danger" size="large" @click="getSelections" :icon="Delete">删除</ElButton>
    </div>

    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      row-key="id"
      headerAlign="center"
      align="center"
      :loading="loading"
      sortable
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
